<template>
  <!-- 销售订单 -->
  <section class="content-box">
    <div>
      <div v-if="isshowList">
        <el-col :span="24" class="SuppC-toolbar">
          <el-form class="title">
            <div class="cover">
              <h2>销售订单</h2>
              <el-button @click="handleSale()" size="small" class="el-icon-plus">&nbsp;新建</el-button>
              <el-button @click="Search()" size="small" class="el-icon-search">&nbsp;查询</el-button>
            </div>
            <el-form-item class="cover">
              <div class="list-img">
                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-in.png" alt=""/>
                <span>出仓</span>
              </div>
              <div class="list-img">
                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-invoice.png" alt=""/>
                <span>发票</span>
              </div>
              <div class="list-img">
                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-rvc.png" alt=""/>
                <span>收款</span>
              </div>
              <el-popover
              ref="poverMerge"
              placement="bottom"
              width="100"
              trigger="hover"
              :visible-arrow="false">
              <div class="item-img" @click="handleExport()" style="display:block;float:none">
                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-export.png" alt=""/>
                <span>导出</span>
              </div>
              </el-popover>
              <div class="list-img" v-popover:poverMerge>
                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-more.png" alt=""/>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
        <!--列表-->
        <el-table v-if="dataList" :data="dataList" ref="multipleTable" @selection-change="handleSelectionList" highlight-current-row v-loading="loading" element-loading-text="正在加载中" style="width: 100%">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="A" label="单据日期" width="120" sortable>
          </el-table-column>
          <el-table-column prop="B" label="单据编号" width="120" sortable>
          </el-table-column>
          <el-table-column prop="C" label="单据名称" width="120" sortable>
          </el-table-column>
          <el-table-column prop="D" label="出仓进度" width="120" sortable>
          </el-table-column>
          <el-table-column prop="E" label="销量金额" width="120">
          </el-table-column>
          <el-table-column prop="F" label="已收款" width="120">
          </el-table-column>
          <el-table-column prop="G" label="结算方式" width="120">
          </el-table-column>
          <el-table-column prop="H" label="销售物品" width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="I" label="销售客户" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="J" label="状态" width="120">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="list-img" @click="Repeal(scope.$index, scope.row)">
                <img class="common-icon" src="../../../../static/content/images/Common/common-repeal.png" alt=""/>
              </div> 
              <div class="list-img" @click="checkflowRow(scope.$index, scope.row)">
                <img class="common-icon" src="../../../../static/content/images/Common/common-flow.png" alt=""/>
              </div> 
            </template>  
          </el-table-column>
        </el-table>
      </div>
      <div v-if="isshowSale">
        <!-- 导航条 -->
        <div class="flex-top">
          <div>
            <i class="el-icon-arrow-left back" @click="ToBack"></i>
            <span  style="font-size:20px;vertical-align:middle;margin:0 10px;">
              销售订单{{RadioComputed}}
            </span>
          </div>
          <div class="flex">
            <span class="wrapper cover">
              <div style="margin:10px;overflow:hidden;">
                <div class="list-img" @click="Save()">
                  <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
                    <img class="common-button-group" src="../../../../static/content/images/Common/common-save.png" alt=""/>
                  </el-tooltip>
                </div>
                <div class="list-img" @click="Submit()">
                  <el-tooltip class="item" effect="dark" content="提交" placement="bottom">
                    <img class="common-button-group" src="../../../../static/content/images/Common/common-submit.png" alt=""/>
                  </el-tooltip>
                </div>
              </div>
            </span>
          </div>
        </div>
        <div class="SuppC-nav-item">
          <el-radio-group
            v-model="radioModel"
            @change="changeRadio(radioModel)">
            <span>
              <el-radio :label="1">产品销售</el-radio>
            </span>
            <span style="padding-left:15px;">
              <el-radio :label="2">材料销售</el-radio>
            </span>
          </el-radio-group>
        </div>
        <main class="main" style="width:1160px;">
          <div class="main-left">
            <div v-if="DocNo">
              <h3>单号</h3>
              <strong>{{DocNo}}</strong>
            </div>
            <div>
              <h3>日期</h3>
              <div class="flex">
                <el-date-picker type="date" v-model="DocDate" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>
            <div class="SuppC-Money">
              <h3>销售金额</h3>
              <el-input type="Number" v-model='name1' placeholder="请录入销售金额"></el-input>
              <i class="icon iconfont icon-rmb"></i>
            </div>
          </div>
          <div class="main-right">
                <div class="left-form">
                  <el-form label-width="70px" class="form-content">
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="销售客户">
                          <el-select v-model="name1" placeholder="请选择" style="width:200px;">
                            <el-option
                              v-for="item in Names"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="结算方式">
                          <el-select v-model="name1" placeholder="请选择" style="width:200px;">
                            <el-option
                              v-for="item in Names"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="需求日期">
                          <el-date-picker type="date" v-model="DocDate" style="width:200px;" placeholder="选择日期">
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
                <div class="right-form">
                  <el-form label-width="100px">
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="是否退货">
                          <el-switch
                            v-model="swithReturn"
                            on-color="#13ce66"
                            off-color="#ff4949">
                          </el-switch>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="业务描述">
                          <el-input
                            class="Suppc-txtarea-min"
                            type="textarea"
                            :rows="3"
                            placeholder="请输入内容"
                            v-model="name1">
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
            </div>
        </main>
        <div class="border-solid"></div>
        <div class="budget cover" style="width:1160px;">
          <h3>销售订单明细</h3>
          <el-input
            placeholder="请输入关键字查询"
            icon="search"
            v-model="input2"
            style="width:200px;"
            size="small"
            :on-icon-click="handleIconClick">
          </el-input>
          <div class="SuppC-Nas-itemRight">
            <el-tooltip class="item" effect="dark" content="导入" placement="top-start" style="margin-right:20px;">
              <span class="SuppC-common-icon"><img src="../../../../static/content/images/Common/common-import.png" alt=""></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="导出" placement="top-start">
              <span class="SuppC-common-icon" @click="handleExport()"><img src="../../../../static/content/images/Common/common-export.png" alt=""></span>
            </el-tooltip>
          </div>
          <table class="InHideTable" border="1" style="margin:0 0 0 20px;width:1120px;">
            <tr>
              <th style="width:60px;">操作</th>
              <th style="width:180px">存货编码</th>
              <th style="width:180px">存货名称</th>
              <th style="width:120px">库存数量</th>
              <th style="width:120px">销量数量</th>
              <th style="width:120px">销售单价</th>
              <th style="width:120px" class="font-green">销售金额</th>
              <th style="width:180px">业务描述</th>
            </tr>
            <tr v-for="(item,index) in SaleDetail" :key="index">
              <td>
                <span class="SuppC-common-icon" @click="addInRow(index)"><!--添加入仓单-->
                  <img src="../../../../static/content/images/Common/common-add.png" alt=""/>
                </span>
                <span class="SuppC-common-icon" @click="deleInRow(index)"><!--删除入仓单当前行-->
                  <img src="../../../../static/content/images/Common/common-dele.png" alt=""/>
                </span>
              </td>
              <td>
                <el-input :ref="index * 4 + 1" @keyup.enter.native="jump(index * 4 + 1)" type="text" class="input-Focus white" v-model="item.A"></el-input>
              </td>
              <td>{{item.B}}</td>
              <td>{{item.C}}</td>
              <td>
                <el-input :ref="index * 4 + 2" @keyup.enter.native="jump(index * 4 + 2)" type="text" class="input-Focus white" v-model="item.D"></el-input>
              </td>
              <td>{{item.E}}</td>
              <td>
                <el-input :ref="index * 4 + 3" @keyup.enter.native="jump(index * 4 + 3)" type="text" class="input-Focus white" v-model="item.F"></el-input>
              </td>
              <td>
                <el-input :ref="index * 4 + 4" @keyup.enter.native="jump(index * 4 + 4)" type="text" class="input-Focus white" v-model="item.G"></el-input>
              </td>
            </tr>
            <tr>
              <td colspan="6">合计</td>
              <td>{{SaleMoneyCount}}</td>
              <td></td>
            </tr>
          </table>
        </div>
      </div>
      <!--导出询问框-->
      <el-dialog title="请选择导出的内容" :visible.sync="ExportDialog" :modal-append-to-body="false" size="tiny">
        <el-radio-group v-model="radioExport">
          <el-radio :label="1">导出模板</el-radio>
          <el-radio :label="2">导出订单明细</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer cover">
          <el-button size="small" @click="Cancel">取 消</el-button>
          <el-button size="small" @click="Determine">确 定</el-button>
        </div>
      </el-dialog>
      <!--流程图-->
      <el-dialog title="流程执行情况" :visible.sync="checkflowRowVisible" :modal-append-to-body="false" align="center">
        <el-table :data="docRowView" min-height="300" header-align="center" v-loading="docViewloading" element-loading-text="拼命刷新中...">
        <el-table-column property="PlanUser" label="操作人"></el-table-column>
        <el-table-column property="StepName" label="步骤名称"></el-table-column>
        <el-table-column property="OpDate" label="时间"></el-table-column>
        <el-table-column property="OpRemark" label="审批流程"></el-table-column>
        </el-table>
      </el-dialog>
      <!--查询-->
      <el-dialog title="查询" :visible.sync="dialogSearchVisible" :modal-append-to-body="false" size="tiny">
            <el-form :model="Searchform" class="Searform">
                <el-form-item label="单据日期" :label-width="formLabelWidth">
                <el-date-picker type="date" v-model="Searchform.A" style="width:120px;" placeholder="选择日期"></el-date-picker>
                至&nbsp;<el-date-picker type="date" v-model="Searchform.B" style="width:120px;" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="销售金额" :label-width="formLabelWidth">
                <el-input v-model.number.trim="Searchform.C" auto-complete="off" style="width:120px;"></el-input>
                至&nbsp;<el-input v-model.number.trim="Searchform.D" auto-complete="off" style="width:120px;"></el-input>
                </el-form-item>
                <el-form-item label="已收款" :label-width="formLabelWidth">
                <el-input v-model.number.trim="Searchform.E" auto-complete="off" style="width:120px;"></el-input>
                至&nbsp;<el-input v-model.number.trim="Searchform.F" auto-complete="off" style="width:120px;"></el-input>
                </el-form-item>
                <el-form-item label="结算方式" :label-width="formLabelWidth">
                <el-select v-model="Searchform.G" style="width:262px;" placeholder="请选择">
                    <el-option value="" label="全部">全部</el-option>
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="单据编号" :label-width="formLabelWidth">
                <el-input v-model="Searchform.H" style="width:262px;" placeholder="请输入关键字查询"></el-input>
                </el-form-item>
                <el-form-item label="单据名称" :label-width="formLabelWidth">
                <el-input v-model="Searchform.I" style="width:262px;" placeholder="请输入关键字查询"></el-input>
                </el-form-item>
                <el-form-item label="单据状态" :label-width="formLabelWidth">
                <el-select v-model="Searchform.J" style="width:262px;" placeholder="请选择">
                    <el-option value="" label="全部">全部</el-option>
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="销售客户" :label-width="formLabelWidth">
                <el-input v-model="Searchform.K" style="width:262px;"></el-input>
                </el-form-item>
                <el-form-item label="销售物品" :label-width="formLabelWidth">
                <el-input v-model="Searchform.L" style="width:262px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer cover">
                <el-button size="small" @click="Reset">重 置</el-button>
                <el-button size="small" @click="Query">确 定</el-button>
            </div>
      </el-dialog>
    </div>
  </section>
</template>
<script>
    export default {
      name: "SaleOrder",
      data() {
        return {
          loading:false,
          isshowList:true,
          isshowSale:false,
          ExportDialog:false,
          radioExport: 1,
          checkflowRowVisible:false,
          docViewloading:false,
          swithReturn:false,
          name1: '',
          input2: '',
          dialogSearchVisible:false,
          radioModel:'',
          DocNo: 'SDK1009207888',
          DocDate: '2018-01-01',
          formLabelWidth: '70px',
          options: [
            {
              value: "1",
              label: "黄金糕"
            },
            {
              value: "2",
              label: "双皮奶"
            }
          ],
          Searchform: {
                A: '',
                B: '',
                C: '',
                D: '',
                E: '',
                F: '',
                G: '',
                H: '',
                I: '',
                J: '',
                K: '',
                L: ''
          },
          docRowView: [{
                    PlanUser: "杨晓莉",
                    StepName: "提交",
                    OpDate: "2018/1/25 16:25:55",
                    OpRemark: ""
            },
            {
                    PlanUser: "杨晓莉",
                    StepName: "提交",
                    OpDate: "2018/1/25 16:25:55",
                    OpRemark: ""
            },
            {
                    PlanUser: "杨晓莉",
                    StepName: "提交",
                    OpDate: "2018/1/25 16:25:55",
                    OpRemark: ""
            },
            {
                    PlanUser: "杨晓莉",
                    StepName: "提交",
                    OpDate: "2018/1/25 16:25:55",
                    OpRemark: ""
            }
          ],
          SaleDetail:[
            {
              A:'FK100945501',
              B:'可口可乐',
              C:1103,
              D:401,
              E:200,
              F:2366,
              G:'***',
            },{
              A:'FK100945501',
              B:'可口可乐',
              C:1103,
              D:401,
              E:200,
              F:2366,
              G:'***',
            },{
              A:'FK100945501',
              B:'可口可乐',
              C:1103,
              D:401,
              E:200,
              F:2366,
              G:'***',
            }
          ],
          Names:[{
            label:'1',
            value:"1"
          },{
            label:'1',
            value:"2"
          }],
          dataList:[
            {
              A:'2018-1-1',
              B:'NX18010001',
              C:'内销订单',
              D:'50%',
              E:15000,
              F:0,
              G:'出仓单结算',
              H:'KDCA24,KBCA',
              I:'广州品冠电子有限公司',
              J:'待审核'
            },{
              A:'2018-1-1',
              B:'NX18010001',
              C:'内销订单',
              D:'50%',
              E:15000,
              F:0,
              G:'出仓单结算',
              H:'KDCA24,KBCA',
              I:'广州品冠电子有限公司',
              J:'待审核'
            }
          ]
        }
      },
      methods:{
        //导出
        handleExport(){
          this.ExportDialog = true;
        },
        handleSale(index,row){
          this.isshowSale= true;
          this.isshowList = false;
          this.radioModel = '';
          if(this.isUndefined(row)){
            console.log('新增');
            this.$router.push({
              path:'/SaleOrder',
              query:{
                News:true
              }
            })
          }else{
            console.log('编辑');
            this.$router.push({
              path: '/SaleOrder',
              query:{
                Edit:true,
              }
            })
          }
        },
        jump(index) {
          if (this.$refs[index + 1]) {
            this.$refs[index + 1][0].$el.getElementsByTagName('input')[0].focus();
          }
        },
        addInRow(index){
          const item = {
            A:'FK100945501',
            B:'可口可乐',
            C:1103,
            D:401,
            E:200,
            F:2366,
            G:'***',
          }
          this.SaleDetail.splice(index+1,0,item)
        },//入仓明细删除事件
        deleInRow(index){
          this.$confirm("确认删除该记录吗?", "提示", {
            type: "warning"
          }).then(() => {
            this.SaleDetail.splice(index, 1);
            this.$message({
              message: "已删除",
              type: "success"
            });
          });
        },
        //流程图
        checkflowRow() {
            this.checkflowRowVisible = true;
        },
        Determine() {
            this.ExportDialog = false;
            console.log(this.radioExport, "this.radioExport");
        },
        //弹框取消按钮
        Cancel() {
            this.ExportDialog = false;
        },
        //重置
        Reset() {
          this.Searchform = {
            A: "",
            B: "",
            C: "",
            D: "",
            E: "",
            F: "",
            G: "",
            H: "",
            I: "",
            J: "",
            K: "",
            L: ""
          };
        },
        //多选
        handleSelectionList(val) {
            let arr = [];
            this.multipleSelection = val;
            this.multipleSelection.forEach((item, index) => {
                console.log(item.date, 'item');
                arr.push(item.date)
            })
            const arrjoin = arr.join();
            console.log(arrjoin);
        },
        // 新建返回到列表页面
        ToBack() {
          this.isshowList = true;
          this.isshowSale = false;
          this.$router.push({
            path:'/SaleOrder'
          })
        },
        async Query() {
          this.dialogSearchVisible = false;
        },
        Search() {
            this.dialogSearchVisible = true;
            console.log(this.isshowInvoice, 'isshowInvoice');
            console.log(this.dialogSearchVisible, 'this.dialogSearchVisible')
        },
        // 撤销
        Repeal(index, row) {
            this.$confirm("确认撤销吗?", "提示", {
                type: "warning"
            }).then(() => {
                this.$message({
                    type: "success",
                    message: "撤销成功"
                });
            });
        },
      },
      computed: {
        RadioComputed(){
          if(this.radioModel === 1){
            return '—产品销售'
          }else if(this.radioModel === 2 ){
            return '—材料销售'
          }else{
            return this.radioModel;
          }
        },
        //销售订单 销售金额
        SaleMoneyCount(){
          let sum = 0;
          this.SaleDetail.forEach(item=>{
            sum += Number(item.F)
          })
          return sum;
        }
      },
      created(){
        const query = this.$route.query;
        if(query.News && (query.News === true || query.News === 'true')){
          this.isshowSale = true;
          this.isshowList = false;
        }
      }
    }
</script>
<style scoped lang="scss">
@import "../../../common/css/index.css";
.toolbar h2 {
  line-height: 36px;
  margin: 0 10px 0 0;
}
.toolbar .title {
  display: inline-flex;
  line-height: 5px;
  width: 100%;
  justify-content: space-between;
}
.main-left{
  padding:1vw 1vw;
}
.main-left h3{
  height: 20px;
  line-height: 20px;
  margin-bottom: 10px;
}
.left-form,.right-form{
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-table .cell{
  padding:0 0;
}
.common-icon{
  line-height:24px;
  float:none
}
</style>